import React from 'react'
/* 引入蚂蚁金服轮播图组件 */
import { Carousel } from 'antd-mobile';

// import axios from 'axios'
//引入本都图片
import nav1 from '../assets/images/nav-1.png'
import nav2 from '../assets/images/nav-2.png'
import nav3 from '../assets/images/nav-3.png'
import nav4 from '../assets/images/nav-4.png'

/* 引入scss样式文件 */
import Nav from './index.module.scss'
//引入搜索框组件
import CitySearch from '../components/CitySearch'
//引入封装好的request
import { request as axios, baseURL, promiseAll } from '../utils/request.js'

class Index extends React.Component {
    /* state：状态数据 */
    state = {
        //轮播图数组
        swiperList: [],
        //导航栏数组
        navList: [
            {
                id: 0,
                text: '整租',
                imgSrc: nav1
            },
            {
                id: 1,
                text: '合租',
                imgSrc: nav2
            },
            {
                id: 2,
                text: '地图找房',
                imgSrc: nav3
            },
            {
                id: 3,
                text: '去出租',
                imgSrc: nav4
            },
        ],
        //租房小组
        groupList: [],
        //最新资讯
        newsList: [],
        imgHeight: 176,
    }
    //生命周期挂载
    componentDidMount() {
        promiseAll(
            [
                this.getSwiper(),
                this.getGroup(),
                this.getNews()
            ])
    }
    //1.获取轮播图
    getSwiper() {
        return axios({
            url: '/home/swiper'
        })
            .then(
                res => {
                    // console.log(res.data.body);
                    this.setState({
                        swiperList: res.data.body
                    })
                }
            )
    }
    //2.获取租房小组
    getGroup() {
        return axios({
            url: '/home/groups'
        })
            .then(
                res => {
                    this.setState({
                        groupList: res.data.body
                    })
                }
            )
    }
    //3.获取最新资讯
    getNews() {
        return axios({
            url: '/home/news'
        })
            .then(res => {
                this.setState({
                    newsList: res.data.body
                })
                // console.log(res.data.body);
            })
    }
    render() {
        //结构状态数据
        const { swiperList, navList, groupList, newsList } = this.state
        return (
            <div>
                {/* 1.轮播图 */}
                <div className={Nav.hk_carousel}>

                    {/*搜索框 */}
                    <div className={Nav.city_search} onClick={() => {
                        this.props.history.push('/citylist')
                    }}>
                        <CitySearch />
                    </div>

                    {/* 条件渲染轮播图 */}
                    {swiperList.length && <Carousel
                        autoplay
                        infinite
                    >
                        {swiperList.map(val => (
                            <a
                                key={val.id}
                                href="http://www.alipay.com"
                                style={{ display: 'inline-block', width: '100%', height: this.state.imgHeight }}
                            >
                                <img
                                    src={baseURL + val.imgSrc}
                                    alt=""
                                    style={{ width: '100%', verticalAlign: 'top' }}
                                    onLoad={() => {
                                        // fire window resize event to change height
                                        window.dispatchEvent(new Event('resize'));
                                        this.setState({ imgHeight: 'auto' });
                                    }}
                                />
                            </a>
                        ))}
                    </Carousel>
                    }
                </div>

                {/*  2.导航栏 */}
                <nav className={Nav.hk}>
                    {navList.map(el => <div className={Nav.nav_item} key={el.id}>
                        <img src={el.imgSrc} alt='' />
                        <div>{el.text}</div>
                    </div>)}
                </nav>

                {/* 3.租房小组 */}
                <div className={Nav.hk_group}>
                    <div className={Nav.hk_group_title}>
                        <span>租房小组</span>
                        <span>更多</span>
                    </div>
                    <div className={Nav.hk_group_content}>
                        {groupList.map(el => <div className={Nav.hk_group_item} key={el.id}>
                            <div className={Nav.hk_group_item_info}>
                                <div className={Nav.hk_group_item_info_title}>
                                    {el.title}
                                </div>
                                <div className={Nav.hk_group_item_info_desc}>
                                    {el.desc}
                                </div>
                            </div>
                            <div className={Nav.hk_group_item_img}>
                                <img src={baseURL + el.imgSrc} alt="" />
                            </div>
                        </div>)}
                    </div>
                </div>

                {/* 4.最新资讯 */}
                <div className={Nav.news}>
                    <div className={Nav.news_title}>最新资讯</div>
                    <div className={Nav.news_content}>
                        {newsList.map(el => <div className={Nav.news_item} key={el.id}>
                            <div className={Nav.news_item_img}>
                                <img src={baseURL + el.imgSrc} alt="" />
                            </div>
                            <div className={Nav.news_item_info}>
                                <div className={Nav.news_item_info_title}>{el.title}</div>
                                <div className={Nav.news_item_info_detail}>
                                    <span>{el.from}</span>
                                    <span>{el.date}</span>
                                </div>
                            </div>
                        </div>)}
                    </div>
                </div>

            </div>

        );
    }
}

export default Index;